<!-- 签收 -->
<template>
	<view class="main">
	<view class="content">
	<TopTabBar ref="inputModal" :contact="phone" @update:data="handleDataFromChild" :selectedOption='selectedOption'/> <!-- 引入顶部 Tab 导航栏组件 -->
	</view>
	<view class="avatar-info">
		<input type="text"
		  placeholder="请输入运单号、品名、收货人电话查询"
		  v-model="inputValue"
		  class="contact-info"
		 @input="searchItemsByKeyword"></input>
	</view>
	<view v-if="items.length === 0" class="empty-state">
	    <image src="/../../../static/空数据.png" style="height:180px;width: 180px;">
		<view style="font-size: 20px;text-align: center;">暂无数据!</view>
	</view>
	<view v-else>
	<view v-for="(item, index) in queryResult" :key="index" 
	:class="['content-list', { 'first-tab': index === 0 },
				{ 'last-tab': index === queryResult.length - 1 }]">
		<view>
			<view style="border-bottom: 1px solid #ccc;">
			<view class="avatar-text">
			<text class="yundan" style="">运 单 号</text>
			<text class="number" style="line-height: 1.2;">{{ item.waybillNumber }}</text>
<!-- 			<text class="deliver" style="" v-if="item.status===0">新</text>
				<text class="deliver" style="" v-else-if="item.status===2">发</text>
				<text class="deliver" style="" v-else></text> -->
			<view style="display: flex;flex-direction: row;">
				<text class="deliver" v-if="item.status === 0">新</text>
				<text class="deliver" v-else-if="item.status === 2">发</text>
			    <!-- 条件成立时显示一个占位符 -->
			    <template v-if="item.status === 0 || item.status === 2">
						   <text class="deliver"></text>
			    </template>
			    <!-- 条件不成立时显示两个占位符 -->
			    <template v-else>
			      <text class="deliver"></text>
			      <text class="deliver"></text>
			    </template>
			  </view>
				<text class="price" style="text-align: center;margin-left: 80px;">费用</text>
			<text class="money" style="" v-if="item.sanbaoCost!=null">￥{{item.sanbaoCost.toFixed(2)}}</text>
			</view>
			</view>
		</view>
		<view class="content-list-1">
			<view class="avatar-list">
			<text class="shipment">货件信息</text>
			<text class="algebra"  v-if="item.number!=null">{{item.number}}件</text>
			<text class="one"> | </text>
			<text class="kg" v-if="item.weight!=null">{{item.weight}}kg</text>
			<text class="meter" v-if="item.volume!=null">{{item.volume}}m</text>
			<text class="draw" v-if="item.paymentMethod==='提付'">提付:{{item.grossFreight.toFixed(1)}}</text>
			</view>
		</view>
		<view class="content-list-2">
			<view class="avatar-list">
			<text class="artNo">货号</text>
			<text class="artNumber" v-if="item.articleNumber!=null">{{item.articleNumber}}</text>
			</view>
		</view>
		<view class="content-list-3">
			<view class="avatar-list">
			<text class="package">包装内容</text>
			<text class="artNumber" v-if="item.installContent!=null">{{item.installContent}}</text>
			</view>
		</view>
		<view class="content-list-9" >
			<view class="avatar-list">
			<text class="options" style="color: red;">运单类型</text>
			<text class="delivery-options" v-if="item.type===1" style="font-weight: bold;color: red;">送货单</text>
			<text class="delivery-options" v-if="item.type===2" style="font-weight: bold;color: red;">提货单</text>
			<text class="delivery-options" v-if="item.type===3" style="font-weight: bold;color: red;">三包单</text>
			</view>
		</view>
		<view class="content-list-4">
			<view class="avatar-list">
			<text class="options">配送方式</text>
			<text class="delivery-options" v-if="item.receiving!=null">{{item.receiving}}</text>
			</view>
		</view>
		<view class="content-list-5">
			<view class="avatar-list">
			<text class="options">派单人</text>
			<text class="delivery-options" v-if="item.sender!=null">{{item.sender}}</text>
			</view>
		</view>
		<view class="content-list-6">
			<view class="avatar-list">
			<text class="options">收货人</text>
		<text class="delivery-options"  v-if="item.putUserName!=null">{{item.putUserName}}</text>
		<!-- <text class="delivery-number" v-if="item.putPhone!=null" @click="call(item,index)">{{item.putPhone}}</text> -->
			<text class="delivery-number" v-if="item.putPlane!=null" @click="callPhone(item.putPlane)">{{item.putPlane}}</text>
			<text class="delivery-icon"><image src="../../../static/电话.png"></image></text>
			</view>
		</view>
		<view class="content-list-7" >
			<view class="avatar-list"  style="display: flex;flex-direction: row;align-items: center;position: relative;">
			<text class="options">送货地址</text>
			<text class="delivery-options" v-if="item.destinationStation!==null">{{item.destinationStation}}<text v-if="item.consigneeDetailedAddress!=null">{{item.consigneeDetailedAddress}}</text></text>
			<view class="delivery-axis"  @click="HeadMap(index,item)"><image src="../../../static/坐标.png"></image></view>
			</view>
		</view>
		<view class="content-list-8">
			<view class="avatar-list">
			<text class="options">提货电话</text>
			<text class="delivery-options" style="color: #00aaff;" v-if="item.masterPorterContact!=null" @click="call2(item,index)">{{item.masterPorterContact}}</text>
			<text class="delivery-icon" v-if="item.masterPorterContact!=null"><image src="../../../static/电话.png"></image></text>
			</view>
		</view>
		<view class="content-list-9">
			<view class="avatar-list">
			<text class="options">提货地址</text>
			<text class="delivery-options" v-if="item.masterPorterAddress!=null">{{item.masterPorterAddress}}</text>
			<text class="delivery-options" v-if="item.deliveryDistance!=null" style="color: #ffb300;"> {{item.deliveryDistance}} KM</text>
			</view>
		</view>
		<view class="content-list-10">
			<view class="avatar-list">
			<text class="options">厂家信息</text>
			<text class="delivery-options" v-if="item.sendUserName!=null">{{item.sendUserName}}</text>
			<text class="delivery-options" v-if="item.arrivalNotice===1"><image style="width: 150px;height: 150px;position: absolute;left: 220px;t" src="../../../static/已提货.png"></image></text>
			</view>
		</view>
		<view class="content-list-11">
			<view class="avatar-list">
			<text class="options">派单日期</text>
			<text class="delivery-options" v-if="item.paidanTime!=null">{{ formatDate(item.paidanTime) }}</text>
			</view>
		</view>
		<view class="content-list-12">
			<view class="avatar-list">
			<text class="options">预约日期</text>
			<text class="delivery-options" v-if="item.predictTime!=null">{{formatDate(item.predictTime)}}</text>
			</view>
		</view>
		<view class="content-list-13">
			<view class="avatar-list13">
			<text class="options">分单信息</text>
			<text class="delivery-options"></text>
			</view>
		</view>
		<view class="content-list-14">
			<view class="avatar-button">
			<button class="abnormal" v-if="currentIndex==1 && item.type===3" @click="abnormalToOrder(item, index)">☇异常</button>
			<button class="booked"  v-if="currentIndex==1" @click="showInputModal(item, index)" >＋签收</button>
			<button class="details" @click="detailsToOrder(item, index)">√详情</button>
			</view>
		</view>
		<view class="end" style="height: 50px;"></view>
		</view>
	</view>
		
	<view>
		<view v-if="items.length > 0" class="end2"></view>
	</view>

	<view class="content-list-15">
		<view class="avatar-order">
		<text>合计： {{items.length}}条记录</text>
		</view>
	</view>
	<!-- <InputModal ref="inputModal" @add-item="handleAddItem" :item="item"/> -->
	<Toast ref="toast"/>
	<deliveryGood ref="delivery" @add-item="handleAddItem" :workId="workId" :waybillNumber="waybillNumber"/>
	</view>
</template>

<script>
	import TopTabBar from '@/pages/components/signTabBar/signTabBar.vue'; 
	import {
		getOrder,
		sign
	} from '@/api/sign.js';
	import {getSign} from '@/api/delivery.js';
	import Toast from '@/pages/components/Toast/Toast.vue';
	import deliveryGood from '@/pages/components/signGood/deliveryGood.vue';
	export default {
		 components: {
		    TopTabBar,
			Toast,
			deliveryGood
		  },
		data() {
			return {
				 pageTitle: '页面标题',
				 currentIndex:1,
				 req:{
					  contactInformation:'',
					  beginTime:'',
					  endTime:''
				 },
				 items: [
					 
				 ],
				 contact:'',
				 item:{},
				 visible: false,
				 message: '',
				 inputValue:'',
				 workId:0,
				 queryResult:''
			}
		},
		props: {
			 phone: {
				 type: String,
				 required: true
			 },
			 selectedOption: {
			     type: String,
			     required: true
			 },
		    },
		watch: {
			items() {
			    this.searchItemsByKeyword();
			  }
		},
		mounted(){
			this.contact = this.phone;
			this.$refs.inputModal.switchTab(1);
		},
		methods: {
			handleAddItem(){
				 this.$refs.inputModal.switchTab(1);
			},
			HeadMap(index,item){
				console.log("地图");
				const address=item.consigneeDetailedAddress
				const latitudeId=null
				console.log(address);
				if(address!==undefined &&address!==''){
				uni.navigateTo({
					url: '/pagesA/index/map/map?address='+address+'&latitudeId='+latitudeId// 请注意，这里的url应为相对路径，且以'/'开头
				});
				}
			},
			call2(item,index){
				const phoneNumber=item.masterPorterContact
				this.callPhone(phoneNumber)
			},
			call(item,index){
				const phoneNumber=item.putPhone
				this.callPhone(phoneNumber)
			},
			callPhone(phoneNumber) {
			        // 检查传入的电话号码是否为空或格式不正确
			        if (!phoneNumber || typeof phoneNumber !== 'string' || !/^\d+$/.test(phoneNumber)) {
			            uni.showToast({
			                title: '电话号码格式不正确',
			                icon: 'none'
			            });
			            return;
			        }
			 
			        // 使用uni.makePhoneCall发起电话拨打请求
			        uni.makePhoneCall({
			            phoneNumber: phoneNumber, // 此处填写要拨打的电话号码
			            success: function () {
			                // 用户确认拨打后，此回调会被触发
			                console.log('用户已确认拨打');
			            },
			            fail: function (err) {
			                // 用户取消拨打或拨打电话失败时，此回调会被触发
			                console.error('拨打电话失败：', err);
			                uni.showToast({
			                    title: '拨打电话失败，请检查您的设置或重试',
			                    icon: 'none'
			                });
			            }
			        });
			    },
			formatDate(dateStr) {
			    const date = new Date(dateStr);
			    // 提取年、月、日、小时、分钟和秒
			    const year = date.getFullYear();
			    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要加1，并且用padStart来确保始终是两位数
			    const day = String(date.getDate()).padStart(2, '0'); // 同上，用padStart来确保始终是两位数
			    const hours = String(date.getHours()).padStart(2, '0');
			    const minutes = String(date.getMinutes()).padStart(2, '0');
			    const seconds = String(date.getSeconds()).padStart(2, '0');
			    
			    // 返回格式化后的日期字符串
			    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			  },
			searchItemsByKeyword() {
				 let keyword = '';
				  if (this.inputValue !== undefined && this.inputValue !== null) {
				      keyword = this.inputValue.toLowerCase();
				  }else{
					  this.items
				  }
			        this.queryResult  = this.items.filter(item => {
			            return (
							(item.waybillNumber !== null &&item.waybillNumber.toLowerCase().includes(keyword)) ||
							(item.description !== null &&item.description.toLowerCase().includes(keyword)) ||
							(item.putUserName !== null &&item.putUserName.toLowerCase().includes(keyword)) ||
							(item.putPlane !== null &&item.putPlane.toLowerCase().includes(keyword))
			            );
			        });
					// this.items=this.queryResult;
			    },
			handleAddItem() {
			      // 将新数据添加到 items 数组中
			       this.items.push();
			      // 由于 Vue 的响应式系统，视图将自动更新
			    },
			detailsToOrder(index){
				this.selectedItem = index.businessId;
				const waybillNumber=index.waybillNumber;
				if(index.businessId===undefined){
					this.selectedItem = index.id;
				}
				uni.navigateTo({	
					url: '/pages/index/details/details?id='+this.selectedItem+'&waybillNumber='+waybillNumber// 请注意，这里的url应为相对路径，且以'/'开头
				});
			},
			showInputModal(item, index) {
				const selectedItem =item.id;
				const waybillNumber =item.waybillNumber;
				const type=item.type;
				const workId=item.id;
				const businessId = item.businessId || selectedItem;
				const stockId=item.stockId
				this.workId=item.businessId;
				console.log(this.workId)
				if(type==2){
					this.$refs.delivery.show('是否签收['+item.waybillNumber+']');
				}else{
					uni.navigateTo({
						url: '/pages/index/sign/sign?id='+selectedItem+'&phone='+this.phone+'&type='+type+'&workId='+workId+'&businessId='+businessId+'&waybillNumber='+waybillNumber+'&stockId='+stockId// 请注意，这里的url应为相对路径，且以'/'开头
					});
				}
			     },
			handleLeftClick() {
			      // 处理左按钮点击事件，比如返回上一页
			      uni.navigateBack();
			    },
			    handleRightClick() {
			      // 处理右按钮点击事件，比如打开设置页面
			      uni.showToast({
			        title: '打开设置',
			        icon: 'none'
			      });
			      // 这里可以添加跳转到设置页面的逻辑
			    },
				handleDataFromChild(data){
					this.items=data.items
					console.log(data);
					this.queryResult=data.items
					// 接收来自子组件的数据
					this.currentIndex = data.currentIndex;
				},
				abnormalToOrder(index){
					const selectedItem = index.id
					uni.navigateTo({
						url: '/pages/index/abnormal/abnormal?id='+selectedItem // 请注意，这里的url应为相对路径，且以'/'开头
					});
				}
			  }
		}
</script>

<style scoped>
@import "reply.css";
</style>
